<template>
	<div class="edu-page-warp">
		<div class="edu-page-title">{{$t('message.filterCondition')}}</div>
		<el-card shadow="never" body-style="padding: 24px;">
			<el-form :model="queryForm" ref="queryForm" label-width="80px" class="bg-white pd-12px">
				<el-row :gutter="20" style="height: 50px;">
					<el-col :span="6">
						<el-form-item :label="$t('culture.profession.categoryCode')">
							<el-select v-model="queryForm.categoryCode" :placeholder="$t('message.all')">
								<el-option
									v-for="item in options.categoryCode"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item :label="$t('culture.profession.professionClassCode')">
							<el-select v-model="queryForm.professionClassCode" :placeholder="$t('message.all')">
								<el-option
									v-for="item in options.professionClass"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="4">
						<el-form-item class="float-right">
							<el-button @click="reset">{{$t('message.reset')}}</el-button>
							<el-button type="primary" @click="getEduProfessions">{{$t('message.filter')}}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<div class="edu-page-title mg-top">{{$t('message.eduMajorList')}}</div>
		<el-card shadow="never" body-style="padding: 24px;">
			<div class="edu-opertion-bar">
				<div class="float-left">
					<el-input
						v-model="queryForm.keyWord"
						:placeholder="$t('culture.profession.searchForProCodeOrname')"
						style="width:250px"
						@keyup.enter.native="getEduProfessions"
					>
						<i
							class="el-icon-search"
							slot="suffix"
							style="margin-top:10px;cursor:pointer"
							@click="getEduProfessions"
						></i>
					</el-input>
					<div style="margin-top: 15px;" v-if="isShowHandle">
						<el-dropdown @command="importRecord">
							<el-button type="primary">
								{{$t('message.import')}}
								<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="in">{{$t('message.import')}}</el-dropdown-item>
								<el-dropdown-item command="out">{{$t('message.down')}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-button @click="exportEduPro">{{$t('message.export')}}</el-button>
						<el-button @click="addProfession" type="primary">{{$t('message.add')}}</el-button>
					</div>
				</div>
			</div>
			<el-table :data="tableData" size="mini" @selection-change="handleSelectionChange" stripe>
				<!-- <el-table-column type="selection" width="30"></el-table-column> -->
				<el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
				<el-table-column :label="$t('culture.profession.cateCode')">
					<template slot-scope="scope">{{scope.row.categoryCode}}</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.cateCodeName')">
					<template slot-scope="scope">
						<span :title="scope.row.professionClassName">{{scope.row.categoryName}}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.proClassCode')">
					<template slot-scope="scope">{{scope.row.professionClassCode}}</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.proClassCodeName')">
					<template slot-scope="scope">
						<span :title="scope.row.professionClassName">{{scope.row.professionClassName}}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.proCode')">
					<template slot-scope="scope">{{scope.row.professionCode}}</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.proCodeName')">
					<template slot-scope="scope">
						<el-button type="text" @click="detailEduPro(scope.row.professionCode)" size="mini">
							<span
								:title="scope.row.professionName"
								style="text-decoration: underline;"
							>{{scope.row.professionName}}</span>
						</el-button>
					</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.approvalTime')">
					<template slot-scope="scope">{{formatDate(scope.row.approvalTime*1000)}}</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.recruitStartTime')">
					<template slot-scope="scope">{{formatDate(scope.row.recruitStartTime*1000)}}</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.stopTime')">
					<template slot-scope="scope">{{formatDate(scope.row.stopTime*1000)}}</template>
				</el-table-column>
				<el-table-column :label="$t('culture.profession.againTime')">
					<template slot-scope="scope">{{formatDate(scope.row.againTime*1000)}}</template>
				</el-table-column>
				<el-table-column :label="$t('message.operating')">
					<template slot-scope="scope">
						<el-button
							type="text"
							@click="editProfession(scope.row.professionCode)"
							size="mini"
						>{{$t('message.edit')}}</el-button>
						<el-button
							type="text"
							@click="delProfession(scope.row.professionCode)"
							size="mini"
						>{{$t('message.delete')}}</el-button>
						<!--   <el-button type="text" @click="editTemplate" v-if="functions['edit_workflow']" size="mini">{{$t('message.edit')}}</el-button>
						<el-button type="text" @click="deleteTemplate(scope.row)" v-if="functions['delete_workflow']" size="mini">{{$t('message.delete')}}</el-button>-->
					</template>
				</el-table-column>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						@size-change="onPageSizeChange"
						@current-change="onCurrentPageChange"
						:current-page="queryForm.pageNum_"
						:page-sizes="[10, 20, 40, 80, 100]"
						:page-size="queryForm.pageSize_"
						layout="total, sizes, prev, pager, next, jumper"
						:total="queryForm.total_"
						style="float: right;margin:10px 60px 0 0;"
					></el-pagination>
				</div>
			</div>
		</el-card>
		<!-- 编辑/新增页面 -->
		<el-dialog
			:title="dialogTitle"
			width="66%"
			:visible.sync="showDialog"
			ref="model"
			@close="resetFormValidate()"
			:close-on-click-modal="false"
		>
			<el-form :model="model" ref="model" label-position="left" label-width="120px" :rules="rules">
				<el-row :gutter="24" style="height: 50px;">
					<el-col :span="8">
						<el-form-item prop="professionCode" :label="$t('culture.profession.proCode')">
							<el-input
								:disabled="isEdit !=0"
								v-model="model.professionCode"
								placeholder="请输入专业代码"
								style="width: 100%;"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('culture.profession.proCodeName')" prop="professionName">
							<el-input
								:disabled="isEdit !=0"
								v-model="model.professionName"
								placeholder="请输入专业名称"
								style="width: 100%;"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('culture.profession.proCodeNameEn')" prop="professionNameEn">
							<el-input
								:disabled="isEdit !=0"
								v-model="model.professionNameEn"
								placeholder="请输入专业英文名称"
								style="width: 100%;"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" style="height: 50px;">
					<el-col :span="8">
						<el-form-item prop="categoryCode" :label="$t('culture.profession.categoryCode')">
							<el-select
								:disabled="isEdit !=0"
								v-model="model.categoryCode"
								:placeholder="$t('common.pla.pleaseSelect')"
								style="width: 100%;"
							>
								<el-option
									v-for="item in options.categoryCode"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							prop="professionClassCode"
							:label="$t('culture.profession.professionClassCode')"
						>
							<el-select
								:disabled="isEdit !=0"
								v-model="model.professionClassCode"
								:placeholder="$t('common.pla.pleaseSelect')"
								style="width: 100%;"
							>
								<el-option
									v-for="item in options.professionClass"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('culture.profession.approvalTime')">
							<el-date-picker
								:disabled="isEdit==1"
								v-model="model.approvalTime"
								type="date"
								format="yyyy-MM-dd"
								style="width: 100%;"
								value-format="timestamp"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" style="height: 86px;">
					<el-col :span="8">
						<el-form-item :label="$t('culture.profession.recruitStartTime')">
							<el-date-picker
								:disabled="isEdit==1"
								v-model="model.recruitStartTime"
								type="date"
								format="yyyy-MM-dd"
								value-format="timestamp"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('culture.profession.stopTime')">
							<el-date-picker
								:disabled="isEdit==1"
								v-model="model.stopTime"
								type="date"
								format="yyyy-MM-dd"
								value-format="timestamp"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item :label="$t('culture.profession.againTime')">
							<el-date-picker
								:disabled="isEdit==1"
								v-model="model.againTime"
								type="date"
								format="yyyy-MM-dd"
								value-format="timestamp"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer">
				<el-button v-if="isEdit!=1" @click="cancel">{{$t('message.cancel')}}</el-button>
				<el-button type="primary" v-if="isEdit!=1" @click="confirm">{{ $t('message.confirm') }}</el-button>
			</span>
		</el-dialog>

		<!-- 导入页面 -->
		<edu-dialog
			:title="$t('message.import')"
			width="40%"
			ref="uploadDialog"
			@close="clearFiles"
			@confirm="uploadFile"
		>
			<el-form :model="createForm" ref="createForm" label-width="85px" class="createForm">
				<el-row>
					<el-form-item>
						<el-upload
							ref="upload"
							:data="{}"
							:on-success="uploadDone"
							:auto-upload="false"
							:multiple="false"
							:on-change="(file, fileList)=>{this.fileList = fileList}"
							:limit="1"
							:accept="'application/vnd.ms-excel'"
							:action="importUrl"
						>
							<el-button slot="trigger" size="small" type="primary">{{$t('label.selectFile')}}</el-button>
							<div slot="tip" class="el-upload__tip">{{$t('courseTake.uploadXLSFileOnly')}}</div>
						</el-upload>
					</el-form-item>
				</el-row>
			</el-form>
		</edu-dialog>
	</div>
</template>
<script>
import bus from "common/src/utils/bus";
import { queryDic } from "common/src/api/dictionary";
import {
	findMinstryEduProfessionList,
	findCategoryList,
	findProfessionClassList,
	exportEduProfession,
	addEduPro,
	updateEduPro,
	findEduProByProCode,
	isProCodeExist,
	delEduProByCode,
	downloadUrl,
	uploadUrl,
	upload
} from "common/src/api/culture/eduProfession";
const ELECTIVE_TYPE = {
	//对话框，0：可见, 1：文本(显示文本不可修改), 2, 修改   公用魔法数字
	TEXT: 0,
	READONLY: 1,
	UPDATE: 2
};
export default {
	name: "eduProfession",
	data() {
		var validateCode = (rule, value, callback) => {
			if (this.isEdit == ELECTIVE_TYPE.TEXT) {
				var regex = /^\d{6}[TK]{0,2}$/;
				if (regex.test(value)) {
					callback();
				} else {
					callback(
						new Error(this.$t("culture.rules.plsInputSixNum"))
					);
				}
			} else {
				callback();
			}
		};
		return {
			importUrl: uploadUrl,
			tableData: [],
			isEdit: ELECTIVE_TYPE.TEXT,
			showDialog: false,
			dialogTitle: "",
			options: {
				categoryCode: [],
				professionClass: []
			},
			//是否显示操作按钮
			isShowHandle: false,
			queryForm: {
				pageNum_: 1,
				pageSize_: 10,
				total_: 0,
				categoryCode: "",
				professionClassCode: "",
				keyWord: ""
			},
			model: {
				categoryCode: "",
				professionClassCode: "",
				professionCode: "",
				professionName: "",
				professionNameEn: "",
				approvalTime: 0,
				recruitStartTime: 0,
				stopTime: 0,
				againTime: 0
			},
			rules: {
				professionCode: [
					{
						required: true,
						message: this.$t("culture.rules.plsInputProCode"),
						trigger: "blur"
					},
					{
						validator: validateCode,
						trigger: "blur"
					},
					{
						validator: this.isExist,
						trigger: "blur"
					}
				],
				professionName: [
					{
						required: true,
						message: this.$t("culture.rules.proNameReq"),
						trigger: "blur"
					}
				],
				professionNameEn: [
					{
						required: false,
						message: this.$t("culture.rules.proNameEnReq"),
						trigger: "blur"
					}
				],
				categoryCode: [
					{
						required: true,
						message: this.$t("culture.rules.plsChooseCategoryCode")
					}
				],
				professionClassCode: [
					{
						required: true,
						message: this.$t("culture.rules.professionClassCode")
					}
				]
			}
		};
	},
	created() {
		this.$store.getters.getFuncUnderPage(this.$route.path).then(funcs => {
			this.functions = funcs;
			// console.log(funcs);
		});
		//进入页面根据本科生和研究生判断操作按钮是否显示
		let user =
            this.$store.state.session.user ||
            JSON.parse(localStorage.getItem("user"));
        if (user) {
            this.isShowHandle = user.currentManageDptId === "1";
		}
		//切换管理部门
		bus.$on("updateCurrentManageDeptId", currentManageDeptId => {
            if(currentManageDeptId==1){
				this.isShowHandle = true;
			}else{
				this.isShowHandle = false;
			};
            this.reset();
        });
	},
	mounted() {
		this.getEduProfessions();
		this.getCategoryList();
		this.getProfessionClassList();
	},
	activated() {
		// this.getWorkflows();
	},
	computed: {
		getwatchCategoryCode() {
			const obj = {
				categoryCode: this.queryForm.categoryCode
			};
			return obj;
		},
		getCampus() {
			const obj = {
				model_categoryCode: this.model.categoryCode
			};
			return obj;
		}
	},
	watch: {
		getwatchCategoryCode: {
			handler: function(newVal, oldVal) {
				this.queryForm.professionClassCode = "";
				this.getProfessionClassList();
			},
			deep: true
		},
		getCampus: {
			handler: function(newVal, oldVal) {
				if (this.isEdit === ELECTIVE_TYPE.TEXT) {
					this.model.professionClassCode = "";
					this.$refs.model.validateField("professionClassCode");
				}

				this.getProfessionClassList();
			},
			deep: true
		},
		showDialog(newVal, oldVal) {
			if (!newVal) {
				this.reset_add();
			}
		}
	},
	methods: {
		getEduProfessions() {
			findMinstryEduProfessionList(this.queryForm).then(res => {
				if (res.code == 200) {
                    //根据部门判断是否显示数据
					if(this.isShowHandle){
                        this.tableData = res.data.list;
                        // this.model.pageNum_ = res.data.pageNum_;
                        // this.model.pageSize_ = res.data.pageSize_;
						// this.model.total_ = res.data.total_;
						this.queryForm.pageNum_ = res.data.pageNum_;
                        this.queryForm.pageSize_ = res.data.pageSize_;
                        this.queryForm.total_ = res.data.total_;     
					}else{
                        this.tableData = [];
                        this.queryForm.pageNum_ = 1;
                        this.queryForm.pageSize_ = 10;
                        this.queryForm.total_ = 0;
					} 
                }
			});
		},
		isExist(rule, code, callback) {
			if (this.isEdit == ELECTIVE_TYPE.UPDATE) {
				callback();
			} else {
				isProCodeExist(code).then(res => {
					if (res.code == 200) {
						if (res.data)
							callback(
								new Error(this.$t("culture.rules.proCodeExist"))
							);
						else callback();
					}
				});
			}
		},
		getCategoryList() {
			findCategoryList().then(res => {
				if (res.code == 200) {
					for (let key in res.data) {
						this.options.categoryCode.push({
							value: res.data[key].code,
							label: res.data[key].name
						});
					}
				}
			});
		},
		getProfessionClassList() {
			this.options.professionClass = [];
			let data = "";
			if (this.queryForm.categoryCode) {
				this.queryForm.professionClassCode = "";
				data = "?category=" + this.queryForm.categoryCode;
			}
			if (this.model.categoryCode) {
				//this.model.professionClassCode = "";
				data = "?category=" + this.model.categoryCode;
			}
			findProfessionClassList(data).then(res => {
				if (res.code == 200) {
					for (let key in res.data) {
						this.options.professionClass.push({
							value: res.data[key].code,
							label: res.data[key].name
						});
					}
				}
			});
		},
		onPageSizeChange(size) {
			this.queryForm.pageSize_ = size;
			this.getEduProfessions();
		},
		onCurrentPageChange(currentPage) {
			this.queryForm.pageNum_ = currentPage;
			this.getEduProfessions();
		},
		formatDate(timenumber) {
			if (timenumber) return moment(timenumber).format("YYYY-MM-DD");
			else return "";
		},
		reset() {
			this.queryForm.categoryCode = "";
			this.queryForm.professionClassCode = "";
			this.queryForm.keyWord = "";
			this.getEduProfessions();
			
		},
		confirm() {
			this.$refs.model.validate(valid => {
				if (!valid) {
					return;
				}
				this.model.approvalTime = this.model.approvalTime / 1000;
				this.model.recruitStartTime =
					this.model.recruitStartTime / 1000;
				this.model.stopTime = this.model.stopTime / 1000;
				this.model.againTime = this.model.againTime / 1000;
				if (this.isEdit === ELECTIVE_TYPE.TEXT) {
					addEduPro(this.model).then(res => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: this.$t("message.addSuccess")
							});
							// this.model.categoryCode = "";
							this.showDialog = false;
							this.reset();
						}
					});
				} else {
					updateEduPro(this.model).then(res => {
						if (res.code == 200) {
							this.$message({
								type: "success",
								message: this.$t("message.editSuccess")
							});
							this.showDialog = false;
							// this.model.categoryCode = "";
							this.reset();
						}
					});
				}
			});
		},

		reset_add() {
			this.model.categoryCode = "";
			(this.model.professionClassCode = ""),
				(this.model.professionCode = ""),
				(this.model.professionName = ""),
				(this.model.professionNameEn = ""),
				(this.model.approvalTime = 0),
				(this.model.recruitStartTime = 0),
				(this.model.stopTime = 0),
				(this.model.againTime = 0);
		},
		getEduProDetail(data) {
			findEduProByProCode(data).then(res => {
				if (res.code == 200) {
					res.data.approvalTime = res.data.approvalTime * 1000;
					res.data.recruitStartTime =
						res.data.recruitStartTime * 1000;
					res.data.stopTime = res.data.stopTime * 1000;
					res.data.againTime = res.data.againTime * 1000;
					this.model = res.data;
				}
			});
		},
		getdialogTitle(val) {
			if (val == 0) {
				return this.$t("culture.profession.addProfession");
			} else if (val == 1) {
				return this.$t("culture.profession.detailProfession");
			} else {
				return this.$t("culture.profession.editProfession");
			}
		},
		editProfession(data) {
			this.queryForm.categoryCode = "";
			this.isEdit = ELECTIVE_TYPE.UPDATE;
			this.getEduProDetail(data);
			this.dialogTitle = this.getdialogTitle(this.isEdit);
			this.showDialog = true;
		},
		addProfession() {
			this.isEdit = ELECTIVE_TYPE.TEXT;
			this.reset_add();
			this.dialogTitle = this.getdialogTitle(this.isEdit);
			this.showDialog = true;
		},
		detailEduPro(data) {
			findEduProByProCode(data).then(res => {
				if (res.code == 200) {
					res.data.approvalTime = res.data.approvalTime * 1000;
					res.data.recruitStartTime =
						res.data.recruitStartTime * 1000;
					res.data.stopTime = res.data.stopTime * 1000;
					res.data.againTime = res.data.againTime * 1000;
					this.model = res.data;
					this.isEdit = ELECTIVE_TYPE.READONLY;
					this.dialogTitle = this.getdialogTitle(this.isEdit);
					this.showDialog = true;
				}
			});
		},
		delProfession(data) {
			this.$confirm(
				this.$t("message.deleteConfirm"),
				this.$t("message.prompt"),
				{
					confirmButtonText: this.$t("message.confirm"),
					cancelButtonText: this.$t("message.cancel"),
					type: "warning"
				}
			).then(_ => {
				delEduProByCode(data).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("message.deleteSuccess")
						});
						this.getEduProfessions();
					}
				});
			});
		},
		exportEduPro() {
			// let d=[];
			// d.push(this.queryForm.categoryCode);
			// d.push(this.queryForm.professionClassCode);
			// d.push(this.queryForm.keyWord);
			// Array.from(d);
			let data = Object.assign({}, this.queryForm);
			/*  data["X-Token"] =
        this.$store.state.session.sessionid ||
        localStorage.getItem("sessionid") ||
        ""; */
			exportEduProfession(data);
		},
		resetFormValidate() {
			// this.model.categoryCode = "";
			this.$refs.model.resetFields();
		},
		cancel() {
			this.showDialog = false;
			// this.model.categoryCode = "";
		},
		importRecord(type) {
			if (type == "in") {
				this.$refs.uploadDialog.open();
			} else if (type == "out") {
				window.location.href = downloadUrl;
			}
		},
		clearFiles() {
			this.$refs.upload.clearFiles();
			this.fileList = [];
		},
		uploadFile() {
			if (_.isEmpty(this.fileList)) {
				this.$message({
					type: "info",
					message: this.$t("message.selectFilePlease")
				});
				return;
			}
			this.$refs.upload.submit();
		},
		uploadDone(res, file, fileList) {
			if (res.msg) {
				this.$message({ type: "info", message: res.msg });
			} else {
				this.$message({
					type: "success",
					message: this.$t("message.addSuccess")
				});
				this.getEduProfessions();
			}
		}
	}
};
</script>

